<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Ankang
 * @Date: 2021-06-07 16:04:08
 * @LastEditors: Ankang
 * @LastEditTime: 2021-06-08 21:09:30
-->
<template>
  <div class="container">
    <div v-if="isLoading" class="loading">
      <van-skeleton v-for="v in 10" :key="'key' + v" title :row="2" />
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <slot :list="list"></slot>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";

import Vue from "vue";
import { Skeleton, List, PullRefresh } from "vant";
Vue.use(Skeleton);
Vue.use(List);
Vue.use(PullRefresh);

export default {
  components: {},

  data() {
    return {
      list: [],
      isLoading: true,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },

  methods: {
    async loadData() {
      // axios 获取数据
      let { limit, offset } = this;
      console.log(limit, offset);
      let result = await axios.get(`/zdmapp/good_articles_list`, {
        params: {
          limit,
          offset,
        },
      });

      // 到底了的判断
      let hasMore = this.offset < 40 ? true : false;
      this.finished = !hasMore;

      // 更新list
      // ES6 展开运算符
      this.list = [...this.list, ...result.data.data];
    },

    async onLoad() {
      console.log("aaa");
      // 在执行了下拉的动作后，this.refreshing, 即刻变为true
      if (this.refreshing) {
        this.list = [];
        this.offset = 0;
        this.refreshing = false;
      } else {
        // 如果是上拉加载更过，需要更新offset
        this.offset += this.limit;
      }

      await this.loadData();
      this.loading = false;
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },

  created() {
    this.limit = 10;
    this.offset = 0;
  },

  async mounted() {
    // 如果调用的函数是async, 在取结果的时候，要用await修饰符
    await this.loadData();

    // 显示数据，控制骨架屏
    this.isLoading = false;
  },
};
</script>

<style lang='stylus' scoped>

</style>